// components/area-picker/index.js
import request from '../../api/request'

const app = getApp();

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    pickerView: {
      type: Boolean,
      value: false
    },    
    column:{
      type: Number, //显示列
      value: 3
    },	 
    columnsPlaceholder: {
      type: Array
    },               //['请选择', '请选择', '请选择']
    value: {				 //id数组 String类型
      type: Array
    },
    search: {
      type: String,
      value: 'id'
    },
    showText: String,	//top,bottom  pickerView 模式下 地市选取值展示位 默认显示在下面
  },

  /**
   * 组件的初始数据
   */
  data: {
    indicatorStyle: `height: ${Math.round(app.globalData.screenHeight/(750/42))}px;`,
    areaList: [],
    provinces: [],
    citys: [],
    areas: [],
    cityText: '',
    showText: '',
    selectIndex: [],
    selectName: [],
    selectVal: []
  },

  ready: function(){
    if(!this.data.pickerView){
      this.setData({
        showText: "请选择"
      })
    }

    if(!wx.$isNull(this.data.columnsPlaceholder) ){
      this.setData({
        column: this.data.columnsPlaceholder.length
      })
    }
    
    this.getRegions().then(res=>{
      if(this.data.search != 'id'){
        let vals = [], realSearch = true
        for(const n in this.data.value){
          if(!wx.$isNull(this.data.columnsPlaceholder)){
            if(this.data.value[n] == this.data.columnsPlaceholder[n]){
              vals.push('')
              realSearch = false
            }
          }
          if(realSearch){
            for(const i in res[n]){
              if(this.data.value[n] == res[n][i].fullname){
                vals.push(res[n][i].id)
                break
              }
            }
          }
        }
        this.setData({
          value: vals
        })
      }
      console.log(this.data.value)
      this.setData({
        areaList: res
      })
      this.initData(res)
    })
  },



  /**
   * 组件的方法列表
   */
  methods: {
    getRegions(){
      return request({
        url: '/commons/getAreaList',
        method: 'get'
      })
    },
    fillProvinces(areaList){
      let provinces = areaList[0]
      if(!wx.$isNull(this.data.columnsPlaceholder[0])){
        provinces.unshift({id:'', parentId:'', fullname: this.data.columnsPlaceholder[0]})
      }
      this.setData({
        provinces: provinces
      })
    },
    fillCitys(provinceId, areaList){
      let cities = []
      for(const i in areaList[1]){
        if(areaList[1][i].parentId == provinceId){
          cities.push(areaList[1][i])
        }
      }
      if(!wx.$isNull(this.data.columnsPlaceholder[1]) ){
        cities.unshift({id:'', parentId:'', fullname: this.data.columnsPlaceholder[1]})
      }
    
      this.setData({
        citys: cities
      })
    },
    fillAreas(cityId, areaList){
      if(this.data.column == 3){
        let areas = []
        for(const i in areaList[2]){
          if(areaList[2][i].parentId == cityId){
            areas.push(areaList[2][i])
          }
        }
        if(!wx.$isNull(this.data.columnsPlaceholder[2]) ){
          areas.unshift({id:'', parentId:'', fullname: this.data.columnsPlaceholder[2]})
        }

        this.setData({
          areas: areas
        })
      }
    },
    initData(areaList){
      let provinceId, cityId, areaId
      this.fillProvinces(areaList)
      if(wx.$isNull(this.data.value) || wx.$isNull(this.data.value[0])){
        provinceId = this.data.provinces[0].id
      }else{
        provinceId = this.data.value[0]
      }
      if(this.data.column>=2){
        this.fillCitys(provinceId, areaList)
        if(wx.$isNull(this.data.value) || wx.$isNull(this.data.value[1])){
          cityId = this.data.citys[0].id
        }else{
          cityId = this.data.value[1]
        }
      }

      if(this.data.column == 3){
        this.fillAreas(cityId,areaList)
        if(wx.$isNull(this.data.value) || wx.$isNull(this.data.value[2])){
          areaId = this.data.areas[0].id
        }else{
          areaId = this.data.value[2]
        }
      }
      this.initIndex(provinceId, cityId, areaId)
    },
    initIndex(provinceId, cityId, areaId){
      let len = this.data.column;
      let selectVal = new Array(len)
      let selectName = new Array(len)
      let selectIndex = new Array(len)
      let cityText =''


      for(const i in this.data.provinces){
        if(this.data.provinces[i].id == provinceId){
          selectIndex[0] = parseInt(i);
          selectVal[0] = this.data.provinces[i].id
          selectName[0] = this.data.provinces[i].fullname
          cityText = this.data.provinces[i].fullname
          break
        }
      }
      if(len>=2){
        for(const i in this.data.citys){
          if(this.data.citys[i].id == cityId){
            selectIndex[1] = parseInt(i);
            selectVal[1] = this.data.citys[i].id
            selectName[1] = this.data.citys[i].fullname
            if(cityText != selectName[1]){
              cityText = cityText + "-" + selectName[1]
            }
            break
          }
        }

        if(len == 3){
          for(const i in this.data.areas){
            if(this.data.areas[i].id == areaId){
              selectIndex[2] = parseInt(i);
              selectVal[2] = this.data.areas[i].id
              selectName[2] = this.data.areas[i].fullname
              cityText = cityText + "-" + selectName[2]
              break
            }
          }
        }
      }


      if(wx.$isNull(cityText)){
        cityText = '请选择'
      }
      this.setData({
        showText: cityText
      })

      setTimeout(() => {
        this.setData({
          selectIndex: selectIndex,
          selectVal: selectVal,
          selectName: selectName,
          cityText: cityText
        },function(){
          if(this.data.pickerView){
            let data = {
              val: selectVal,
              name: selectName,
              txt: cityText
            }
            this.triggerEvent('change', data)
          }
        })
      })

    },

    change(e) {
      let selectIndex = e.detail.value
      let len = selectIndex.length
      if(this.data.selectIndex[0]!=selectIndex[0]){
        if(len == 2){
          selectIndex[1] = 0
        }
        if(len == 3){
          selectIndex[1] = 0
          selectIndex[2] = 0
        }
      }
      if(this.data.selectIndex[1]!=selectIndex[1]){
        if(len == 3){
          selectIndex[2] = 0
        }
      }

      let provinceId, cityId
      provinceId = this.data.provinces[selectIndex[0]].id
      if(len>=2){
        this.fillCitys(provinceId, this.data.areaList)
        cityId = this.data.citys[selectIndex[1]].id
        if(len==3){
          this.fillAreas(cityId, this.data.areaList)
        }
      }
      this.onSelect(selectIndex)
    },
    onSelect(selectIndex){
      let p, c, a, t, selectName, selectVal
      p = this.data.provinces[selectIndex[0]]
      if(p.id==''){
        this.setData({
          showText: '请选择',
          cityText: '请选择'
        })
      }else{
        t = p.fullname
      }
      if(this.data.column>=2){
        c = this.data.citys[selectIndex[1]]
        if(c.id != '' && t != c.fullname){
          t = t + '-' + c.fullname
        }
        selectName = [p.fullname, c.fullname]
        selectVal = [p.id ,c.id]

      }
      if(this.data.column==3) {
        a = this.data.areas[selectIndex[2]]
        if(a!=undefined){
          console.log(a)
          if(a.id != ''){
            t = t + '-' + a.fullname
          }
          selectName = [p.fullname, c.fullname, a.fullname]
          selectVal = [p.id ,c.id, a.id]
        }
      }

      if(t == undefined){
        t = '请选择'
      }

      setTimeout(() => {
        this.setData({
          selectIndex: selectIndex,
          selectName: selectName,
          selectVal: selectVal,
          cityText: t
        })
      })

      if(this.data.pickerView){
        const data = {
          name: selectName,
          val: selectVal,
          txt: t
        }
        this.triggerEvent('change', data)
      }
    },
    showModal(e){
      this.setData({
        show: 'show'
      })
    },
    hideModal(e){
      this.setData({
        show: ''
      })
    },
    okModal(e){
      let showtxt = this.data.cityText
      if(wx.$isNull(this.data.selectVal[0])){
        if(wx.$isNull(this.data.columnsPlaceholder)){
          showtxt = '请选择'
        }else{
          showtxt = this.data.columnsPlaceholder[0]
        }
      }

      this.setData({
        showText: showtxt,
        show: ''
      })
      const data = {
        name: this.data.selectName,
        val: this.data.selectVal,
        txt: showtxt
      }
      this.triggerEvent('change', data)
    }
  }
})
